<template>
	<u-popup :show="visible" :round="15" mode="bottom" @close="cancel" safe-area-inset-bottom>
		<view class="pupop-title">{{ title }}</view>
		<slot></slot>
		<view class="footer">
			<view class="btn" @click="confirm">确定</view>
			<view class="line"></view>
			<view class="btn" @click="cancel">取消</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	name: "CognPupop",
	props: {
		visible: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: "",
		},
	},
	methods: {
		confirm() {
			this.$emit("confirm");
		},
		cancel() {
			this.$emit("cancel");
		}
	},
};
</script>

<style lang="scss">
.pupop-title {
	color: #333333;
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	height: 75px;
	line-height: 75px;
}

.line {
	width: 100%;
	background-color: #f2f2f2;
	height: 6rpx;
}

.btn {
	height: 74px;
	text-align: center;
	line-height: 74px;
	color: #000000;
	font-size: 14px;
}

.footer {
	margin-top: 20px;
	border-top: 1px solid #f2f2f2;
	flex-shrink: 0;
}
</style>
